<template>
	<view class="content">
		<view class="text-area bg-head">
			<view class="head">
				<image class="logo" src="/static/img/logo.png"></image>
				<view class="head-mid">
					<uv-search :showAction="false" placeholder="周边游" v-model="search" shape="round"
						boxStyle="height: 50rpx;" bgColor="#CEF1FD">
					</uv-search>
					<view style="display: flex;flex-direction: row;justify-content: space-around;margin: 10rpx 0;">
						<span class="round-button">推荐搜索标</span>
						<span class="round-button">推荐搜索标</span>
						<span class="round-button">推荐搜索标</span>
						<span class="round-button">推荐搜索标</span>
					</view>
				</view>
				<view class="head-right">
					<span>
						<image style="width: 50rpx;height: 50rpx;" src="/static/home/img/gonglue.png"></image>
					</span>
					<span>
						攻略
					</span>
				</view>
			</view>
			<view>
				<uv-scroll-list style="white-space: nowrap;height: 80px;width: 100%;">
					<view class="scroll-item" @click="gotoUrl('/pages/traffic/index')">
						<image class="head-icon" src="/static/home/img/chechuan.png"></image>
						<span class="head-icon-text">车船交通</span>
					</view>
					<view class="scroll-item">
						<image class="head-icon" src="/static/home/img/lvyou.png"></image>
						<span class="head-icon-text">旅游</span>
					</view>
					<view class="scroll-item">
						<image class="head-icon" src="/static/home/img/jiudian.png"></image>
						<span class="head-icon-text">酒店民宿</span>
					</view>
					<view class="scroll-item">
						<image class="head-icon" src="/static/home/img/jingdian.png"></image>
						<span class="head-icon-text">景点周边</span>
					</view>
					<view class="scroll-item">
						<image class="head-icon" src="/static/home/img/meishi.png"></image>
						<span class="head-icon-text">美食</span>
					</view>
					<view class="scroll-item">
						<image class="head-icon" src="/static/home/img/yule.png"></image>
						<span class="head-icon-text">娱乐</span>
					</view>
					<view class="scroll-item">
						<image class="head-icon" src="/static/home/img/gouwu.png"></image>
						<span class="head-icon-text">购物</span>
					</view>
				</uv-scroll-list>
			</view>
		</view>
		<view class="action-content">
			<view class="align-mid">
				<image style="margin: 10px 0;height: 25px;width: 150px;" src="/static/home/img/action-content.png">
				</image>
			</view>
			<view
				style="background-image: url('/static/home/bg/miaosha.png');background-size: 100% 100%;width: 90%; margin-left: 5%;height: 240rpx;display: flex;">
				<view style="padding-left: 15rpx;padding-top: 1.6rem;width: 50%;text-align: center;">
					<p style="font-size: 35rpx;color: #0C88D8;">限时秒杀</p>
					<p style="font-size: 25rpx;">距本场结束
						<uv-count-down :time="60 * 60 * 1000" format="HH:mm:ss" autoStart millisecond @change="UvCountDown">
							<view>
								<text
									class="time-bg-blue">{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours }}</text>:
								<text
									class="time-bg-blue">{{ timeData.minutes>=10?timeData.minutes:'0'+timeData.minutes }}</text>:
								<text
									class="time-bg-blue">{{ timeData.seconds>=10?timeData.seconds:'0'+timeData.seconds }}</text>
							</view>
						</uv-count-down>
					</p>
					<p
						style="background-color: #F5E8D6;color: #FAA342;margin-top: 6px;font-size: 23rpx;border-radius: 10px;">
						34人疯抢中>></p>
				</view>
				<image style="margin-top: 10px;margin-left: 40rpx; height: 80%;width: 40%;"
					src="/static/home/bg/qiandao.png">
				</image>
			</view>
			<view style="display: flex;margin-top: 40rpx;">
				<view class="discount-container"
					style="background-image: url('/static/home/bg/pingou.png');color: #E17400;">
					>
					<view class="discount-l">
						<p style="font-size: 35rpx;">拼购优惠</p>
						<p style="font-size: 25rpx;">#超省拼团</p>
						<p class="go-button" style="background-color: #E17400;">
							GO<uv-icon name="play-right-fill" size="23rpx" color="#fff"></uv-icon>
						</p>
					</view>
					<image style="margin: 50rpx 8rpx 0 8rpx;height: 65%;width: 50%;" src="/static/home/bg/qiandao.png">
					</image>
				</view>
				<view class="discount-container"
					style="background-image: url('/static/home/bg/kanjia.png');color: #8E79CC;">
					>
					<view class="discount-l">
						<p style="font-size: 35rpx;">砍价到底</p>
						<p style="font-size: 23rpx;">越砍越省钱！</p>
						<p class="go-button" style="background-color: #8E79CC;">
							GO<uv-icon name="play-right-fill" size="23rpx" color="#fff"></uv-icon>
						</p>
					</view>
					<image style="margin: 50rpx 8rpx 0 8rpx;height: 65%;width: 50%;" src="/static/home/bg/qiandao.png">
					</image>
				</view>
			</view>
			<view
				style="background-image: url('/static/home/bg/chaozhi.png');background-size: 100% 100%;width: 90%;margin-left: 5%;margin-top: 20px;height: 240rpx;display: flex;">
				<view style="padding-top: 60rpx;width: 30%;text-align: center;">
					<p style="font-size: 35rpx;"><b>超值购</b></p>
					<p style="font-size: 35rpx;color: #2C2828;">购物补贴</p>
				</view>
				<uv-swiper :list="swiperList" :showTitle="true" nextMargin="15rpx" previousMargin="15rpx" :circular="true"
					height="180rpx" style="width: 65%;margin-top: 30rpx;" :displayMultipleItems="display_multiple_items"
					:duration="duration">
				</uv-swiper>
			</view>
		</view>
		<view style="width: 100%;padding: 30rpx;display: flex;">
			<view
				style="height: 200rpx;width: 36%;background-image: url('/static/home/bg/qiandao.png');background-size: 100% 100%;">
				<view style="width: 50%;padding: 30rpx 0 0 16rpx;">
					<p style="color: #0A8EE0;font-size: 32rpx;">签到有礼</p>
					<p style="font-size: 23rpx;color: #4d5c64;">每日累计签到</p>
					<p class="go-button" style="background-color: #21BEF3;">
						立即签到</p>
				</view>
			</view>
			<view
				style="margin-left: 3%;height: 200rpx;width: 24%;background-image: url('/static/home/bg/lingquan.png');background-size: 100% 100%;text-align: center;">
				<p style="color: #09BEC5;font-size: 30rpx;">领取优惠券</p>
				<p style="font-size: 23rpx;color: #4d5c64;">领券购买更优惠</p>
			</view>
			<view
				style="margin-left: 3%;height: 200rpx;width: 24%;background-image: url('/static/home/bg/zhuli.png');background-size: 100% 100%;text-align: center;">
				<p style="color: #BD7B09;font-size: 30rpx;">助力领券</p>
				<p style="font-size: 23rpx;color: #4d5c64;">邀请好友领奖励</p>
			</view>
		</view>
		<view style="width: 90%;margin-top: 20rpx;padding: 0 5%;">
			<uv-swiper :list="bannerList" radius="20px" class="swiper" height="240rpx" :circular="true" :indicator="true"
				:indicator-dots="indicatorDots" :autoplay="autoplay" :duration="duration">
			</uv-swiper>
		</view>
		<view style="width: 90%;padding: 0 5%;margin-top: 20rpx;">
			<view
				style="display: flex;align-items: center;justify-content: space-between;text-align: center;font-size: 22rpx;text-align: center;">
				<view style="width: 20%;">
					<p style="color: #0E9FCA;">
						<image style="width: 30rpx;height: 30rpx;margin-right: 5rpx;" src="/static/home/img/zan.png">
						</image>推荐
					</p>
					<p
						style="background: url('/static/home/bg/blue-talk.png') no-repeat;background-size: 95% 100%;text-align: center;color: white;line-height: 20px;">
						猜你喜欢</p>
				</view>
				<view style="width: 20%;border-left: 1px solid #0A8EE0;">
					<p>旅游</p>
					<p>达人带你游</p>
				</view>
				<view style="width: 20%;border-left: 1px solid #0A8EE0;">
					<p>交通</p>
					<p>顺畅出行</p>
				</view>
				<view style="width: 20%;border-left: 1px solid #0A8EE0;">
					<p>酒店</p>
					<p>发现好酒店</p>
				</view>
				<view style="width: 20%;border-left: 1px solid #0A8EE0;">
					<p>游玩</p>
					<p>周边好玩</p>
				</view>
			</view>
			<view style="margin-top: 20rpx;">
				<view style="background: #38a0d7;border-radius: 15px;height: 11rem;color: #fff;">
					<view style="width: 74%;float: left;position: relative;">
						<uv-image width="100%" height="11rem" radius="15px 0 0 15px"
							src="/static/home/bg/qiandao.png"></uv-image>
						<view
							style="position: absolute;top: 10rpx;left: 20rpx;z-index: 2;font-size: 38rpx;display: flex;">
							<span style="font-weight: 800;">14</span>
							<span style="font-weight: 800;color: #eaae55;margin: 0 5px;"> | </span>
							<view style="font-size: 19rpx;font-weight: 100;display: flex;flex-direction: column;">
								<span>aug</span><span>2025</span>
							</view>
							<span style="font-weight: 800;margin-left: 5px;">今日好玩</span>
						</view>
						<p style="position: absolute;bottom: 50rpx;left: 20rpx;">小岛上的码头</p>
						<p style="position: absolute;bottom: 10rpx;left: 20rpx;display: flex;">
							<uv-avatar size="40rpx"></uv-avatar>
							<span>周游世界</span>
						</p>
						<view
							style="position: absolute;bottom: 10rpx;right: 20rpx;display: flex;background-color: #dfe7ec;padding: 0 12rpx;border-radius: 8px;font-size: 20rpx;">
							<uv-icon name="eye"></uv-icon>
							<span style="color: #000;">555</span>
						</view>
					</view>
					<view
						style="width: 25%;float: right;display: flex;flex-direction: column;align-items: center;padding: 0.3rem 0;">
						<uv-image src="/static/home/bg/qiandao.png" width="98%" height="3rem" radius="5px"
							customStyle="margin-bottom:0.1rem"></uv-image>
						<uv-image src="/static/home/bg/qiandao.png" width="98%" height="3rem" radius="5px"
							customStyle="margin-bottom:0.1rem"></uv-image>
						<uv-image src="/static/home/bg/qiandao.png" width="98%" height="3rem" radius="5px"
							customStyle="margin-bottom:0.1rem"></uv-image>
						<view style="display: flex;font-size: 30rpx;">MORE<uv-icon name="play-right-fill" size="30rpx"
								color="#fff"></uv-icon></view>
					</view>
				</view>
			</view>
			<coupon></coupon>
			<xinren></xinren>
			<view style="margin-top: 1rem;">
				<uv-grid :col="2" :border="false">
					<uv-grid-item style="align-items: flex-start;background-color: #fff;border-radius: 15px;"
						v-for="(item, index) in goodsList" :key="index">
						<span class="goods_tip">游玩</span>
						<span class="goods_type">多日游</span>
						<uv-image radius="15px" width="100%" height="260rpx" mode="aspectFill" :lazyLoad="lazyLoad"
							src="/static/home/bg/zhuli.png" class="goods_imgs"></uv-image>
						<view class="goods-content">
							<p style="font-size: 32rpx;font-weight: 500;">
								<span
									style="font-size: 25rpx;background-color: #feebe6;color: #f24618;margin-right: 10rpx;padding: 5rpx;border-radius: 6px;">订</span>
								<span
									style="font-size: 25rpx;background-color: #f13a09;color: #fff;margin-right: 10rpx;padding: 5rpx;border-radius: 6px;">团购</span>
								火山国家地址公园
							</p>
							<p style="color: #60b3df;">25125人对这篇文章感兴趣</p>
							<p style="margin-top: 0.6rem;display: flex;align-items: center;"><uv-avatar size="40rpx"
									shape="circle"></uv-avatar><span>周游世界</span></p>
							<p style="margin-top: 1.8rem;display: flex;justify-content: space-between;">
								<span style="display: flex;"><uv-icon size="25rpx" name="eye"></uv-icon>354</span> <span
									style="display: flex;"><uv-icon size="25rpx" name="heart"></uv-icon>345</span>
							</p>
						</view>
					</uv-grid-item>
				</uv-grid>
			</view>
			<view style="height: 100rpx;"></view>
		</view>
		<uv-tabbar :value="value" @change="index=>value = index">
			<uv-tabbar-item text="首页">
				<template v-slot:active-icon>
					<image class="tabbar-icon" src="/static/icon/home-icon-active.png"></image>
				</template>
				<template v-slot:inactive-icon>
					<image class="tabbar-icon" src="/static/icon/home-icon-inactive.png"></image>
				</template>
			</uv-tabbar-item>
			<uv-tabbar-item text="收藏">
				<template v-slot:active-icon>
					<image class="tabbar-icon" src="/static/icon/collect-icon-active.png"></image>
				</template>
				<template v-slot:inactive-icon>
					<image class="tabbar-icon" src="/static/icon/collect-icon-inactive.png"></image>
				</template>
			</uv-tabbar-item>
			<uv-tabbar-item text="">
				<template v-slot:active-icon>
					<image class="plus-icon" src="/static/icon/plus-icon-active.png"></image>
				</template>
				<template v-slot:inactive-icon>
					<image class="plus-icon" src="/static/icon/plus-icon-inactive.png"></image>
				</template>
			</uv-tabbar-item>
			<uv-tabbar-item text="消息" badge="3">
				<template v-slot:active-icon>
					<image class="tabbar-icon" src="/static/icon/msg-icon-active.png"></image>
				</template>
				<template v-slot:inactive-icon>
					<image class="tabbar-icon" src="/static/icon/msg-icon-inactive.png"></image>
				</template>
			</uv-tabbar-item>
			<uv-tabbar-item text="我的">
				<template v-slot:active-icon>
					<image class="tabbar-icon" src="/static/icon/my-icon-active.png"></image>
				</template>
				<template v-slot:inactive-icon>
					<image class="tabbar-icon" src="/static/icon/my-icon-inactive.png"></image>
				</template>
			</uv-tabbar-item>
		</uv-tabbar>
	</view>
</template>

<script>
	import xinren from "@/components/banner/xinren.vue"
	import coupon from "@/components/banner/coupon.vue"
	
	export default {
		data() {
			return {
				title: 'Hello',
				autoplay: true,
				duration: 500,
				search: '',
				display_multiple_items: 3,
				indicatorDots: true,
				lazyLoad: true,
				goodsList: [{
					name: 'photo',
					title: '李白'
				}, {
					name: 'lock',
					title: '韩信'
				}, {
					name: 'star',
					title: '刘备'
				}],
				value: 0,
				timeData: {},
				swiperList: [{
					url: '/static/home/bg/qiandao.png',
					title: '￥255',
				}, {
					url: '/static/home/bg/qiandao.png',
					title: '￥255',
				}, {
					url: '/static/home/bg/qiandao.png',
					title: '￥255',
				}, {
					url: '/static/home/bg/qiandao.png',
					title: '￥255',
				}, {
					url: '/static/home/bg/qiandao.png',
					title: '￥255',
				}, {
					url: '/static/home/bg/qiandao.png',
					title: '￥255',
				}],
				bannerList: [{
					url: '/static/home/bg/qiandao.png',
					title: '￥255',
				}]
			}
		},
		components: {
			xinren,
			coupon
		},
		methods: {
			UvCountDown(e) {
				this.timeData = e
			},
			gotoUrl(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style scoped>
	page {
		background-color: #f1f3f8;
	}

	.content {
		font-size: 15px;
	}

	/* 头部 */
	.head {
		display: flex;
		margin-top: 2.2em;
	}

	.logo {
		height: 2.8rem;
		width: 2.8rem;
		margin-left: 3px;
		margin-right: 3px;
		float: left;
	}

	.head-mid {
		width: 70%;
		padding: 0 5px;
	}

	#search-button {
		position: absolute;
		top: 35px;
		left: 265rpx;
		height: 26px;
		line-height: 24px;
		border-radius: 20px;
		background-color: #4CD3FE;
		color: white;
	}

	.round-button {
		background-color: #7AD8FE;
		border-radius: 20px;
		text-align: center;
		color: #517784;
		font-size: 24rpx;
		white-space: nowrap;
		padding: 0 10rpx;
	}

	.head-right {
		width: 2rem;
		margin-left: 0.6rem;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.scroll-item {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
	}

	.head-icon {
		height: 110rpx;
		width: 110rpx;
	}

	.head-icon-text {
		text-align: center;
		font-size: 24rpx;
	}

	.bg-head {
		width: 101%;
		padding-top: 20rpx;
		background-image: url("/static/home/bg/bg-head.png");
		background-size: cover;
		background-repeat: no-repeat, repeat;
	}

	.action-content {
		width: 100%;
		height: 930rpx;
		background-color: #23AAEE;
	}

	.align-mid {
		display: flex;
		justify-content: center;
	}

	.time-bg-blue {
		display: inline-block;
		background-color: #23AAEE;
		width: 36rpx;
		text-align: center;
		margin: 0 8rpx;
		border-radius: 5px;
		height: 30rpx;
		line-height: 30rpx;
		color: #fef5f8;
	}

	.time-bg {
		display: inline-block;
		background-color: #E03C1F;
		width: 36rpx;
		text-align: center;
		margin: 0 8rpx;
		border-radius: 5px;
		height: 40rpx;
		line-height: 40rpx;
		color: #fef5f8;
	}

	.goods_tip {
		position: absolute;
		top: 0.3rem;
		right: 0.2rem;
		padding: 0 12rpx;
		background-color: white;
		border-radius: 15px;
		z-index: 2;
		font-size: 18rpx;
	}

	.goods_type {
		position: absolute;
		top: 0.3rem;
		left: 0.2rem;
		padding: 0 12rpx;
		background-color: #fea342;
		border-radius: 15px;
		z-index: 2;
		font-size: 18rpx;
	}

	.goods_imgs {
		width: 100%;
		height: 130px;
		border-radius: 15px;
	}

	.plus-icon {
		width: 54rpx;
		height: 54rpx;
	}

	.tabbar-icon {
		width: 36rpx;
		height: 36rpx;
	}

	.discount-container {
		background-size: 100% 100%;
		width: 42.5%;
		margin-left: 5%;
		height: 240rpx;
		display: flex;
	}

	.discount-l {
		padding-top: 2rem;
		width: 50%;
		text-align: center;
	}

	.go-button {
		color: white;
		margin-top: 6px;
		border-radius: 20px;
		display: flex;
		font-size: 23rpx;
		justify-content: center;
		align-items: center;
	}

	.goods-content {
		padding: 20rpx;
		font-size: 25rpx;
	}
</style>